<template>
  <div class="siderbar">
    <h2 class="black bold">线上教育培训考试平台</h2>
    <div class="routerbox">
      <div class="typebox" v-for="(routeType, i) of routers" :key="i">
        <h6>{{ routeType[0].type }}</h6>
        <ul>
          <li v-for="(route, j) of routeType" :key="j" class="flex item-center" :class="route.current && 'current'" @click="clickMenu(route)">
            <div class="">
              <span class="iconfont black normal" v-html="route.icon"></span>
            </div>
            <div class="">
              <span class="black middle">{{ route.title }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

import router from '@/router'
import { groupBy } from '@/utils'

export default {
  data() {
    return {
      routers: []
    }
  },
  mounted() {
    this.handleRouter()
  },
  methods: {
    handleRouter() {
      let routers = router.options.routes[1].children
      routers = routers.filter(item => !item.hide)
      this.routers = groupBy(routers, item => {
        return [item.type]
      })

      this.routers[0][0].current = true
    },
    clickMenu(route) {
      this.$router.push(route.path)
      this.routers.forEach(type => {
        type.forEach(item => {
          this.$set(item, 'current', route.name === item.name)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.current {
  box-shadow: 0 5px 5px rgba($color: #eee, $alpha: 1.0);
  transition: all .3s;
  &>div:first-of-type {
    span {
      background: var(--color-primary) !important;
      color: #fff;
    }
  }
  &>div:last-of-type {
    span {
      color: var(--color-primary) !important;
    }
  }
  
}
.siderbar {
  &>h2 {
    padding: 10px 0 20px;
    border-bottom: 1px solid #eee;
    text-align: center;
  }
  .routerbox {
    padding: 0 20px;
    .typebox {
      &>h6 {
        margin: 10px 0;
      }
      li {
        padding: 15px 8px;
        cursor: pointer;
        &>div:first-of-type {
          margin-right: 5px;
          &>span {
            padding: 4px;
            border-radius: 3px;
            box-shadow: 0 3px 7px rgba($color: #ccc, $alpha: 1.0);
          }
        }
      }
    }
  }
  
}
</style>